
<template>
  <!--  MyCollection-->
  <div style="text-align: left;">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="white" text-color="black" active-text-color="red">
      <el-menu-item  index="1" @click="queryAll()">所有订单</el-menu-item>
      <el-menu-item  index="2" @click="queryNo()">待支付订单</el-menu-item>
      <el-menu-item index="3" @click="queryYes()">已完成订单</el-menu-item>
    </el-menu>
    <div v-for="t in order" style="background-color: white;padding: 10px 20px;color: #999999">
      <el-row style="text-align: center;background-color: #F5F5F5">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <b>订单号：</b> {{ t.order_number }}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            {{ t.order_time}}
          </div>
        </el-col>
      </el-row>
      <el-row :key="order.id" style="border-bottom: #F5F5F5 solid 2px;padding: 15px 0px">
        <el-col :span="3">
          <div class="grid-content bg-purple">
            <div class="demo-image">
              <div class="block ">
                <el-image style="width: 100px; height: 100px" :src="t.course_image"></el-image>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple-light">
            {{ t.course_name }}
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-light" style="color: red">
            ￥{{ t.actual_amount }}
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-light">
            <span v-if=" t.payment_type==1">PC端</span>
            <span v-if=" t.payment_type==0">移动端</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-light" style="color: deepskyblue">
            <span v-if="t.order_status==0">等待支付</span>
            <span v-if="t.order_status==1">已支付</span>
            <span v-if="t.order_status==2">已取消</span>
            <span v-if="t.order_status==3">已关闭</span>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple" style="float: right">
            <div v-if="t.order_status==0">
              <div style="margin: 10px;">
                <el-button type="danger" plain @click="pay(t.oid,t.actual_amount,t.course_name)">继续支付</el-button>
              </div>
              <div style="margin: 10px;">
                <el-button type="warning" plain @click="overpay(t.oid)">取消支付</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "myorder",
    data() {
      return {
        activeIndex: '1',
        /*关注信息*/
        order: [],
        uid:""
      }
    },
    methods: {
      queryAll(){
        this.$axios.get("teacher-front/demo/course-order/queryBycoAndor?uid="+this.uid).then(r=>{
          //alert(JSON.stringify(r.data.obj))
          this.order=r.data.obj;
        })
      },
      queryNo(){
        let order_status=0;
        this.$axios.get("teacher-front/demo/course-order/queryBycoAndor?uid="+this.uid+"&status="+order_status).then(r=>{
          //alert(JSON.stringify(r.data.obj))
          this.order=r.data.obj;
        })
      },
      queryYes(){
        let order_status=1;
        this.$axios.get("teacher-front/demo/course-order/queryBycoAndor?uid="+this.uid+"&status="+order_status).then(r=>{
          //alert(JSON.stringify(r.data.obj))
          this.order=r.data.obj;
        })
      },

      //支付
       pay(obj,d,a){
        this.$axios.get("teacher-front/demo/course-order/updatebyoid?oid="+obj).then(r=>{
          if(r.data==obj){
            window.location.href="http://localhost:8078/payment/pay?prices="+d+"&oid="+obj+"&names="+this.a;

          }
        })
       },
      //取消支付
      overpay(obj){
        this.$axios.get("teacher-front/demo/course-order/updByoid?oid="+obj ).then(r=>{
          //alert(JSON.stringify(r.data.obj))
         if(r.data==1){
           this.queryAll();
         }
        })
      }

    },
    mounted() {
      let item = sessionStorage.getItem("uid");
      this.uid=item;
      this.queryAll();
    }
  }
</script>

<style scoped>

  .grid-content {
    min-height: 36px;
  }

</style>
